<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../../../css/public.css" media="all" />
	</head>

	<body class="childrenBody">
		<form class="layui-form" lay-filter="formTest" id="form" style="width: 80%;">
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-block">
					<select name="type" id="type" lay-filter="type" value="1" lay-verify="required">
						<option value="1">显示菜单</option>
						<option value="2">功能菜单</option>
						<option value="3">功能按钮</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">权限编码</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="code" lay-verify="required|number" placeholder="">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">名字</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="name" lay-verify="required" placeholder="">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12" id="div-url" style="display: none;">
				<label class="layui-form-label">url</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="url" id="input-url" placeholder="">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12" id="div-icon">
				<label class="layui-form-label">icon</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="icon" lay-verify="required" lay-filter="input-icon" id="input-icon" placeholder="">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">sort</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="sort" lay-verify="required|number" placeholder="">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea placeholder="" class="layui-textarea" name="remarks"></textarea>
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">提交</button>
					<button type="button" class="layui-btn layui-btn-sm layui-btn-primary close-btn">取消</button>
				</div>
			</div>
		</form>
		<script type="text/javascript" src="../../../js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="../../../layui/layui.js"></script>
		<script type="text/javascript" src="../../../custom/js/common.js"></script>
		<script type="text/javascript">
			layui.config({
				base: '../../../plugin/iconPicker'
			}).extend({
				iconPicker: '/iconPicker'
			});

			layui.use(['form', 'layer', 'iconPicker'], function() {
				var $ = layui.jquery;
				var form = layui.form;
				var layer = layui.layer;
				var iconPicker = layui.iconPicker;
				var toUpdateApi = constant.baseUrl + "/system/permission/toUpdate";
				var insertHtml = constant.baseUrl + "/system/permission/insert";
				var updateHtml = constant.baseUrl + "/system/permission/update";
				var insertMethod = "post";
				var updateMethod = "put";
				var url = insertHtml;
				var method = insertMethod;
				iconPicker.render({
					// 选择器，推荐使用input
					elem: '#input-icon',
					// 数据类型：fontClass/unicode，推荐使用fontClass
					type: 'fontClass',
					// 是否开启搜索：true/false
					search: true,
					// 是否开启分页
					page: true,
					// 每页显示数量，默认12
					limit: 12,
					// 点击回调
					click: function(data) {
						$('#input-icon').val(data.icon);
					},
					// 渲染成功后的回调
					success: function(d) {

					}
				});
				var id = getUrlParam("id");
				if(id) {
					//更新
					$("#form").append("<input type='hidden' name='pid' value='' >");
					$("#form").append("<input type='hidden' name='level' value='' >");
					$("#form").append("<input type='hidden' name='id' value='' >");
					method = updateMethod;
					url = updateHtml;
					loadAjax(toUpdateApi + "/" + id, "get", null, function(response) {
						baseCallBack(response, function(response) {
							initSelect(response.data.type);
							$("#type").attr("disabled", "true");
							form.render('select');
							fomrVal(form, "formTest", response.data);
							//判断菜单类型
							if(response.data.type == 1 || response.data.type == 2) {
								iconPicker.checkIcon("input-icon", response.data.icon);
							}

						});
					});
				} else {
					//新增
					var pid = getUrlParam("pid");
					if(!pid) {
						$("#form").append("<input type='hidden' name='level' value='1' >");
					} else {
						var level = getUrlParam("level");
						$("#form").append("<input type='hidden' name='pid' value='" + pid + "' >");
						$("#form").append("<input type='hidden' name='level' value='" + (parseInt(level) + 1) + "' >");
					}

				}

				//控制隐藏
				function initSelect(value) {
					if(value == "1") {
						$("#div-url").hide();
						$("#input-url").attr("lay-verify", "");
						$("#input-url").val("");
						$("#div-icon").show();
						$("#input-icon").attr("lay-verify", "required");
					} else if(value == "2") {
						$("#div-url").show();
						$("#input-url").attr("lay-verify", "required");
						$("#div-icon").show();
						$("#input-icon").attr("lay-verify", "required");
					} else if(value == "3") {
						$("#div-url").hide();
						$("#input-url").attr("lay-verify", "");
						$("#input-url").val("");
						$("#div-icon").hide();
						$("#input-icon").val("");
						$("#input-icon").attr("lay-verify", "");
					}
				}
				//监听类型
				form.on('select(type)', function(data) {
					initSelect(data.value);
				});
				form.on("submit(submit)", function(data) {
					loadAjax(url, method, $("#form").serialize(), function(response) {
						baseCallBack(response, parentReloadCallBack);
					});
					return false;
				})
			})
		</script>
	</body>

</html>